<div id="panel-live-preview">
    <div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
        <div style="width: 20%;display: flex;">
            <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button reload-icon"></button>
	        <button id="previewModeLivePreviewButton" title="{{clickToPreview}}" class="btn-alt-quiet toolbar-button">
	            <i class="fa-solid fa-play"></i>
	        </button>
            <button id="livePreviewModeBtn" title="{{livePreviewConfigureModes}}" class="btn-alt-quiet toolbar-button btn-dropdown btn"><!-- Content will come here dynamically --></button>
        </div>
        <div style="width: fit-content;min-width: 60%;display: flex;justify-content: center; align-items: center;">
<!--            these are buttons that are always invisible to help central align the panel title-->
            <button id="safariButtonBallast" title="{{openInSafari}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/safari/safari-original.svg" />
            </button>
            <button id="chromeButtonBallast" title="{{openInChrome}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/chrome/chrome-original.svg" />
            </button>
            <button id="edgeButtonBallast" title="{{openInEdge}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="styles/images/edge-logo.svg" />
            </button>
            <button id="firefoxButtonBallast" title="{{openInFirefox}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/firefox/firefox-original.svg" />
            </button>
<!--            these are buttons that are always invisible to help central align the panel title-->
            <button id="pinURLButton" title="{{clickToPinUnpin}}" class="btn-alt-quiet toolbar-button unpin-icon"></button>
            <span id="panel-live-preview-title">{{livePreview}}</span>
            <button id="livePreviewPopoutButton" title="{{clickToPopout}}" class="btn-alt-quiet toolbar-button open-icon"></button>
            <button id="safariButton" title="{{openInSafari}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/safari/safari-original.svg" />
            </button>
            <button id="chromeButton" title="{{openInChrome}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/chrome/chrome-original.svg" />
            </button>
            <button id="edgeButton" title="{{openInEdge}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="styles/images/edge-logo.svg" />
            </button>
            <button id="firefoxButton" title="{{openInFirefox}}" class="btn-alt-quiet toolbar-button live-preview-browser-btn forced-hidden">
                <img src="thirdparty/devicon/icons/firefox/firefox-original.svg" />
            </button>
        </div>
        <div style="width: 20%;display: flex;align-items: center; justify-content: flex-end">
            <button id="livePreviewSettingsBtn" title="{{livePreviewSettings}}"
                    class="btn-alt-quiet toolbar-button lp-settings-icon"><i class="fa-solid fa-gear"></i></button>
        </div>
        <iframe id="live-preview-server-iframe"
                title="live preview server"
                src="about:blank"
                style="width:100%;"
                sandbox="allow-same-origin allow-scripts"
                hidden>
        </iframe>
    </div>
    <div class="live-preview-custom-banner forced-hidden">
        <span class="live-preview-banner-message">{{Strings.LIVE_PREVIEW_CUSTOM_SERVER_BANNER}}</span>
        <button class="live-preview-settings-banner-btn btn btn-mini primary" style="margin-left: 10px;">{{Strings.LIVE_DEV_SETTINGS}}</button>
        <i class="fa fa-close custom-server-banner-close-icon"
           style="margin-left: 10px;margin-right: 10px;cursor: pointer;"
           title="{{Strings.CLOSE}}"></i>
    </div>
    <div class="frame-container">
        <div style="width: 3px;"></div>
        <iframe id="panel-live-preview-frame" title="Live Preview" style="border: none"
                width="100%" height="100%" seamless="true" srcdoc='<img width="50px" src="styles/images/Spinner-1s-200px.svg">'
                sandbox="allow-same-origin allow-popups-to-escape-sandbox allow-popups allow-scripts allow-forms allow-modals allow-pointer-lock">
        </iframe>
    </div>
</div>
